<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <table>
            <!-- 
                某些 HTML 元素对于放在其中的元素类型有限制，例如 
                <ul>，<ol>，<table> 和 <select>，相应的，
                某些元素仅在放置于特定元素中时才会显示，
                例如 <li>，<tr> 和 <option>
                
                会导致页面显示的位置不同，有可能会影响到页面布局效果
             -->
            <!-- row 中的内容会被提取到 table 的外面 -->
            <!-- <row></row> -->

            <tr is="vue:row"></tr>
        </table>
    </div>
</body>
<template id="com">
    <tr>
        <td>你好</td>
        <td>世界</td>
    </tr>
</template>
<script>

    const app = {
        data() {
            return {}
        },
        methods: {},
        components: {
            row: {
                template: '#com',
                data() {
                    return {

                    }
                },
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>